<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>意达设计</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../css/swiper.min.css"/>
    <link rel="stylesheet" type="text/css" href="../css/member.css"/>

    <style>
        .hide{display: none}
    </style>

</head>
<body class="body">

<!-- header -->
<div class="detban">
	<img src="" id='icon' style="width: 100%;">
	<div class="detailheader">
		<a href="javascript:void(0);" onclick="api.closeWin();" class="retue"></a>
		<a href="javascript:void(0);" class="sharelink"></a>
	</div>
</div>



<div class="deltit"><span id='goodsname'>HELEN手提时尚女包</span><!-- <a href="javascript:void(0)"></a> --></div>
<div class="deltxt" id='goodscontent'>美国专柜代购mk女包新款小香风sloan 羊皮菱格链条包单肩斜挎包</div>
<div class="delmony"><span id='goodsprice'>￥1688</span><i id='oldprice' style="display: none">￥2199起</i></div>
<div class="deltype">
    <div id='colornum'>
        <span>已选</span>
        <span id='mycolor'>尚未选择颜色和数量</span>
        <span id='mynum'></span>
    </div>
    <a href="javascript:void(0)"  class="tan"></a></div>

<div class="delcomt">
	<div class="delcomt_l">
		<div class="pile"><i></i><i></i><i></i><i></i><i></i></div>
		<span>4.8分</span>
		<em>100%好评</em>
	</div>
	<div class="delcomt_r" id='plnum'>103条评价</div>
</div>
<div class="major">
	<ul style="display: none">
		<li>非常专业 10</li>
		<li>价格合理 5</li>
		<li>服务周到 10</li>
		<li>方便省心 10</li>
	<ul>
</div>
<div id="com">
    <!-- <div class="reviewlist">
        <div class="revtx"><img src="../image/page/img-023.jpg"></div>
        <div class="revlie">
            <div class="revlie_l">
                <div class="plnumb">
                    <span>187****2562</span>
                    <div class="plrev"><i></i><i></i><i></i><i></i><i class="revOn"></i></div>
                </div>
                <div class="revlie_r">2018.04.25</div>
            </div>
            <div class="revcont">
                <p>包包是买来给女朋友的，送给她后非常喜欢，包是真皮的内部做工精细，看着就比较高档</p>
                <span>选择颜色：土豪金</span>
            </div>
        </div>
    </div> -->


</div>



<div class="ckmore"><a href="javascript:void(0);" onclick="showall()" id="showall">查看全部评论</a></div>
<div class="hr hrBG1"></div>
<div class="detailCont" id='imgarr'><img src="" ></div>
<div class="hr hrBG1"></div>

<div class="footerBox1"></div>
<div class="detfooter">
	<a href="javascript:void(0)" class="contlink"><span>联系客服</span></a>
	<a href="javascript:void(0)" class="shoplink" onclick="addcartPlay();"><span>加入购物车</span></a>
	<a href="javascript:void(0)" class='ordbtn' onclick='suborder()'>提交订单</a>
</div>

<!-- 弹框 -->
<div class="frameBox">
	<div class="frameCnt">
		<div class="ftit">
			<div class="ftoall">
				<div class="ftit_l"><img src="../image/page/img-025.jpg" id='icon1'></div>
				<div class="ftit_r">
					<p id='goodsname1'>金狐狸包包女手提包</p>
					<span id='goodscontent1'>#时尚搭配女包# chic时尚五金</span>
				</div>
			    <div class="closeframe"></div>
			</div>
			<div class="frmlist">
				<p>选择颜色</p>
				<ul id='color'>
					<li class="finOn">红色</li>
					<li>黄色</li>
					<li>橙色</li>
					<li>绿色</li>
					<li>青色</li>
					<li>蓝色</li>
					<li>紫色</li>
					<li>金色</li>
				</ul>
			</div>
			<div class="numbs">
				<div class="numbs_l">选择数量</div>
				<div class="numbs_r"><i class="zjbtn"></i><span class='choosenum' id='num'>1</span><i class="jsbtn"></i></div>
			</div>

            <div class="numbs" style="margin-top: 0; border-top: none;" id='showjxs'>
                <div class="numbs_l">选择经销商</div>
                <div class="numbs_r" style="display: flex; align-items: center;"><span style="width: auto; padding-right: .1rem" id='jxs' data-id="0"></span><i style="display: block;
                                               width: .2rem;
                                               height: .2rem;
                                               background: url(../image/icon/icon-029.png) no-repeat center;
                                               background-size: .1rem;"  onclick="choosejxs()"></i></div>
            </div>
           
			<div class="peson">配送至<span>(配送地可能会影响库存，请正确选择)</span></div>
			<div class="fmaddres">
                <a href="#"><span  data-id="0" id='addr'>请选择地址</span><i onclick="chooseaddr()"></i></a>
            </div>
		</div>
		<div class="feombtn"><input type="button" value="确定" onclick='chooseover()'></div>
	</div>
</div>

</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../script/adaptive.js"></script>
<script type="text/javascript" src="../script/swiper.min.js"></script>
<script type="text/javascript" src="../script/tabs.js"></script>
<script type="text/javascript">
    window['adaptive'].desinWidth = 750;
    window['adaptive'].baseFont = 28;
    window['adaptive'].maxWidth = 750;
    window['adaptive'].init();

    var color=0;
    var num=0;
    var addrid=0;
    var jxsid=0;

    var para='';


    
    function addcartPlay () {
        if(color==0){
            alert('请选择颜色');$(".frameBox").show();return;
        }

        var p={token:token, id:api.pageParam.id, color:color}
        api.ajax({
            url: webSiteUrl+'/app/user/addcart',
            method: 'post',
            data: {
                values: p
            }
        }, function(ret, err) {
            api.hideProgress();
            if(ret.code==200){

                api.openWin({
                    name: 'shopName',
                    url: './cart.html',
                    pageParam: {
                        name: 'text'
                    }
                });
            }
        });
    }  
   
    
    
    
    apiready = function () {
        $api.fixStatusBar($api.dom('.header'));
        api.addEventListener({
            name: 'keyback'
        }, function(ret, err){
            api.closeWidget();
        });
		api.showProgress();

        para=api.pageParam;

        if(isvip==2){
            $('#showjxs').show();
        }else{
            $('#showjxs').hide();
        }

        api.ajax({
            url: webSiteUrl+'/app/public/goods',
            method: 'post',
            data: {
                values: {
                    id:para.id
                }
            }
        }, function(ret, err) {
            api.hideProgress();
            
			if(ret.code==200){
            	
            	$('#icon').attr("src",webSiteUrl+ret.data.icon);
                $('#goodsname').html(ret.data.name);
                $('#goodscontent').html(ret.data.content);
                $('#icon1').attr("src",webSiteUrl+ret.data.icon);
                $('#goodsname1').html(ret.data.name);
                $('#goodscontent1').html(ret.data.content);
                
                if(isvip){
                	var price=parseInt(ret.data.vipprice);
                }else{
                	var price=parseInt(ret.data.price);
                }
                $('#goodsprice').html('￥'+price);
                var b=parseInt(price)+parseInt(30);
				//$('#oldprice').html('￥'+b);
                $('#plnum').html(ret.data.plnum+"条评论");

                html = "";
                var tj=ret.data.color;
                for(var i=0;i<tj.length;i++){
                    html += '<li id="c_'+tj[i].id+'" onclick="choosecolor('+tj[i].id+')">'+tj[i].name+'</li>';
                }
                $('#color').html(html);


                html = "";
                var tj=ret.data.com;
                for(var i=0;i<tj.length;i++){
                    if(i==0){
html += '<div  class="reviewlist"><div class="revtx"><img src="'+webSiteUrl+tj[i].icon+'"></div><div class="revlie">';
                    }else{
html += '<div  class="reviewlist hide"><div class="revtx"><img src="'+webSiteUrl+tj[i].icon+'"></div><div class="revlie">';
                    }

                    html += '<div class="revlie_l"><div class="plnumb"><span>'+tj[i].name+'</span><div class="plrev">';

                    var star=tj[i].star;
                    var sss="";
                    for(var j=0;j<star;j++){
                        sss+='<i></i>';
                    }
                    html += sss;

                html += '</div></div><div class="revlie_r">'+tj[i].time+'</div></div><div class="revcont"><p>'+tj[i].content+'</p><span>选择颜色：'+tj[i].color+'</span></div></div></div>';
                    
                    
                }
                $('#com').html(html);

                if(ret.data.plnum==0){
                   $('#com').html('<p style="text-align:center">暂无评论</p>'); 
                   $('#showall').hide();
                }


                html = "";
                var tj=ret.data.imgarr;
                for(var i=0;i<tj.length;i++){
                    
                    html += '<img src="'+webSiteUrl+tj[i]+'" style="width:100%">';
                }
                $('#imgarr').html(html);
               
               

            }else{alert(ret.msg)}
        });

        if(para.aid>0 || para.jid>0){
            info();
        }

        


       
    }
    
    function choosecolor(id){
        color=id;

        $('#mycolor').attr('colorid',id);

        var name=$('#c_'+id).html();
        $('#mycolor').html(name);

        $('#c_'+id).addClass('finOn').siblings().removeClass('finOn');
          
    };
    function choosejxs () {
        
        api.openWin({
            name: 'shopName',
            url: './myuser.html',
            pageParam: {
                gid: para.id
            }
        });
    }
    function chooseaddr () {
        
        api.openWin({
            name: 'shopName',
            url: './myaddr.html',
            pageParam: {
                gid: para.id
            }
        });
    }
    
    function chooseover () {
       num=$('#num').html();
       $('#mynum').html("x"+num);
       addrid=$('#addr').attr('data-id');

        if(color==0){
            alert('请选择颜色');return;
        }
        if(num==0){
            alert('请选择数量');return;
        }
        if(addrid==0){
            alert('请选择地址');return;
        }
        $(".frameBox").hide();
    } 
    
    function suborder () {
        if(color==0){
            alert('请选择颜色');$(".frameBox").show();return;
        }
        if(num==0){
            alert('请选择数量');$(".frameBox").show();return;
        }
        if(addrid==0){
            alert('请选择地址');$(".frameBox").show();return;
        }
        
        var addrid=$('#addr').attr('data-id');
        if(isvip==2){
            var jid=$('#jxs').attr('data-id');
        }else{
           var jid=0; 
        }
        
        //var num=$('#num').html();
        //var color=$('#mycolor').attr('colorid');

        var p={token:token, id:para.id, color:color, num:num, addrid:addrid, jid:jid};
        //alert(JSON.stringify(p));
        api.ajax({
            url: webSiteUrl+'/app/user/order',
            method: 'post',
            data: {
                values: p
            }
        }, function(ret, err) {
            api.hideProgress();
            
            if(ret.code==200){

                api.openWin({
                    name: 'shopName',
                    url: './myorder.html',
                    pageParam: {
                        type: 1,
                    }
                });
            }else{
                alert(ret.msg)
            }
        })



       
    }
    function info(){
        var jxsid=$api.getStorage('jxsid');
          var jxstxt=$api.getStorage('jxstxt');

        $('#jxs').attr('data-id',jxsid);
        $('#jxs').html(jxstxt);

        var addrid=$api.getStorage('addrid');
          var addrtxt=$api.getStorage('addrtxt');
                $('#addr').attr('data-id',addrid);
                $('#addr').html(addrtxt);

                $(".frameBox").show();
        

      
    }
    function jxsinfo () {
         var jxsid=$api.getStorage('jxsid');
          var jxstxt=$api.getStorage('jxstxt');

        $('#jxs').attr('data-id',jxsid);
        $('#jxs').html(jxstxt);

        $(".frameBox").show();return;

        var p={token:token,id:para.jid};
        
        api.ajax({
            url: webSiteUrl+'/app/user/jxsinfo',
            method: 'post',
            data: {
                values: p
            }
        }, function(ret, err) {
            api.hideProgress();
            
            if(ret.code==200){

                var da=ret.data;
                $api.setStorage('jxsinfo',ret.data);

                $('#jxs').attr('data-id',da.id);
                $('#jxs').html(da.addrname);

                $(".frameBox").show();
                
            }else{
                alert(ret.msg)
            }
        })
    }

    function addrinfo () {
        //var a=$api.getStorage('user');alert(JSON.stringify(a))
        var addrid=$api.getStorage('addrid');
          var addrtxt=$api.getStorage('addrtxt');
                $('#addr').attr('data-id',addrid);
                $('#addr').html(addrtxt);

                $(".frameBox").show();return;
        
        
        var p={token:token,id:para.aid};
        
        api.ajax({
            url: webSiteUrl+'/app/user/addrinfo',
            method: 'post',
            data: {
                values: p
            }
        }, function(ret, err) {
            api.hideProgress();
            
            if(ret.code==200){

                var da=ret.data;
                

                $('#addr').attr('data-id',da.id);
                $('#addr').html(da.city+da.addr);

                $(".frameBox").show();
                
            }else{
                alert(ret.msg)
            }
        })
    }


    function showall(){
        $('.hide').show();
          
    };

</script>

</html>
